<template>
  <div>
    <div v-show="!showDetail">
      <el-card class="mb20">
        <el-form :inline="true">
          <el-form-item class="mb0" label="通知分类：">
            <el-select clearable v-model="type">
              <el-option :value="0" label="分类" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card shadow="never">
        <div class="mb20 tl-right">
          <!-- TODO 全选未实现 -->
          <!-- <el-checkbox>全选</el-checkbox> -->
          <el-button :disabled="chosedOne.length === 0" class="ml20" @click="handleRead">已读</el-button>
          <el-button :disabled="chosedOne.length === 0" type="danger" @click="handleDelete">删除</el-button>
        </div>
        <el-tabs class="mes-tabs" v-model="activeName" :tab-position="tabPosition">
          <el-tab-pane name="first">
            <span slot="label">
              <template v-if="notReadList.length > 0">
                <el-badge class="item" :value="notReadList.length" :max="99">未读通知</el-badge>
              </template>
              <template v-else>未读通知</template>
            </span>
            <mes-list
              @showDetail="handleShowDetail"
              @chosedOne="handleChosedOne"
              ref="mesList"
              :List="notReadList"
            />
          </el-tab-pane>

          <el-tab-pane name="second">
            <span slot="label">
              <template v-if="readList.length > 0">
                <el-badge class="item" :value="readList.length" :max="99">已读通知</el-badge>
              </template>
              <template v-else>已读通知</template>
            </span>
            <mes-list
              @showDetail="handleShowDetail"
              @chosedOne="handleChosedOne"
              ref="mesList"
              :List="readList"
            />
          </el-tab-pane>

          <el-tab-pane name="third">
            <span slot="label">
              <span>系统公告</span>
            </span>
            <mes-list @showDetail="handleShowDetail" :List="noticeList" ref="mesList" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>

    <div v-show="showDetail">
      <list-detail @back="handleBack" ref="listDetail" />
    </div>
  </div>
</template>

<script>
import { getNotRead, getRead, updateRead, updateDelete, getPublicReadAll } from '@/api/notify'
import { openNotification } from '@/utils/util'
import MesList from './List'
import ListDetail from '../detail'

export default {
  components: {
    MesList,
    ListDetail
  },
  data() {
    return {
      type: null,
      tabPosition: 'left',
      activeName: 'first',
      notReadList: [],
      readList: [],
      noticeList: [],
      chosedOne: [],
      showDetail: false
    }
  },
  mounted() {
    getPublicReadAll().then(res => {
      console.log('res', res)
      this.noticeList = res.data
    })
    this.getNotRead()
    this.getRead()
  },
  methods: {
    handleShowDetail(item) {
      if (this.activeName === 'first') {
        // 未读，点击查看详情，更新为已读
        updateRead([item]).then(res => {
          if (res.state === '000000') {
            console.log('res', res)
          }
        })
      }

      this.showDetail = true
      this.$refs.listDetail.edit(item)
    },
    handleBack() {
      this.showDetail = false
      if (this.activeName === 'first') {
        //未读时，存在更新已读的情况，返回可能需要刷新列表
        this.getNotRead()
        this.getRead()
      }
    },
    // handleTabClick(tab, event) {
    //   console.log('tab', tab, event)
    // },
    getNotRead() {
      getNotRead().then(res => {
        this.notReadList = res.data
      })
    },
    getRead() {
      getRead().then(res => {
        this.readList = res.data
      })
    },
    // 选择
    handleChosedOne(arr) {
      console.log('arr', arr)

      this.chosedOne = [...arr]
    },
    // 更新已读
    handleRead() {
      // const { notifyId } = this.chosedOne
      updateRead(this.chosedOne).then(res => {
        console.log('res', res)
        if (res.state === '000000') {
          this.getNotRead()
          this.getRead()
          this.chosedOne = []
        }
      })
    },
    // 删除
    handleDelete() {
      // const { notifyId } = this.chosedOne
      console.log('chosedOne', this.chosedOne)

      this.chosedOne.map(v => {
        v.deleteFlag = 1
      })
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除这条通知记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          const res = await updateDelete(_this.chosedOne)
          if (res.state === '000000') {
            openNotification('success', '删除操作成功')
            _this.getNotRead()
            _this.getRead()
            _this.chosedOne = []
            _this.$refs.mesList.reset()
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.ml30 {
  margin-left: 30px;
}

.tl-right {
  text-align: right;
}
.mes-tabs >>> .el-tabs__nav-wrap {
  width: 200px;
}
.mes-tabs >>> .el-tabs__nav-scroll {
  padding-top: 20px;
}
.mes-tabs >>> .el-tabs__item.is-left {
  text-align: center;
}
.mes-tabs >>> .el-tabs__item.is-active {
  color: #1890ff;
  background-color: #e6f7ff;
}
</style>